<template>
  <div class="">
    <h2>{{ obj.name }}</h2>
    <button @click="add">给小明一个年龄</button>
    <h3>{{ obj.age }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: "小明",
      },
    };
  },
  mounted() {},
  methods: {
    add() {
      //   this.obj.age = 18;
      this.$set(this.obj, "age", 18);
    },
  },
  components: {},
  //   beforeRouteEnter(to, from, next) {
  //     //在这个导航守卫中因为路由都还没跳转 所以 实例更加没有创建 所以就没有this
  //     //   因为this指的是实例
  //     // 那么怎么在这个守卫中拿到this，next可以接受一个回调函数作为参数 vm在这里就是实例 就是this
  //     next((vm) => {
  //       if (vm.$store.state.user != "") {
  //         next();
  //       } else {
  //         next("/login");
  //       }
  //     });
  //   },
};
</script>

<style lang="scss"></style>
